/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */

<template>
    <sf-form ref="form"
             class="database-form"
             :label-width="120">
        <sf-form-item>
            <sf-fieldlabel>
                <lang>数据库类型</lang>
            </sf-fieldlabel>
            <span class="database-name"><lang>{{ dataType }}</lang></span>
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>连接名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                v-model="submitData.name"
                :default-width="fieldWidth"
                :placeholder="_('请输入')"
                vtype="name"
                :max-length="30"
                :allow-blank="false" />
        </sf-form-item>
        <sf-form-item class="hide-bottom">
            <sf-fieldlabel>
                <lang>服务器地址</lang>
            </sf-fieldlabel>
            <sf-textarea
                ref="serverAddr"
                v-model="submitData.url"
                :default-width="fieldWidth"
                :placeholder="_('请输入服务器地址，一行一个\nIP:192.168.1.1:8080')"
                :allow-blank="false"
                :validator="_validateIpv4"
                wrap="on" />
            <i v-qtip="_('仅支持填写一个集群内的服务器地址')"
               class="iconfont iconsip-tip manager-form_tip-icon"
               qanchor="right"></i>
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>数据库名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                v-model="submitData.dataBaseName"
                :default-width="fieldWidth"
                :placeholder="_('请输入')"
                vtype="name"
                :max-length="30"
                :allow-blank="false" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>用户名</lang>
            </sf-fieldlabel>
            <sf-textfield
                v-model="submitData.dataBaseUserName"
                :default-width="fieldWidth"
                :placeholder="_('请输入')"
                vtype="name"
                :max-length="30"
                :allow-blank="false" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>密码</lang>
            </sf-fieldlabel>
            <sf-textfield
                v-model="submitData.dataBasePassword"
                :default-width="fieldWidth"
                :placeholder="_('请输入')"
                :allow-blank="false" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel label-separator="" />
            <sf-button @click="checkConnection">
                <lang>连通性测试</lang>
            </sf-button>
            <span v-show="paramsModified"
                  class="result more-text"
                  :class="{'error': !submitData.statusSuccess}">{{ connectionErrMsg }}</span>
        </sf-form-item>
    </sf-form>
</template>

    <style lang="less">
        .database-form {
            .result {

                color: #17C1C5;
                &.error {
                    color: #EE5555;
                }
            }
        }
    </style>

<script  lang="ts">

import urlAdapter from 'src/home/mod_common/url_adapter';
import { multiTrim } from 'src/util/format';
const TEST_CONNECTIONS_URL = urlAdapter('dataSource/connection/test');
import multiLineIpValidator from 'src/util/validator/multi_line_ip_validator';
const MUTIL_KFK_IP_MAX_LINE = 5;
const MUTIL_ES_IP_MAX_LINE = 100;
const MUTIL_IP_NOT_ALLOW =
  '!lookback,!multicast,!broadcast,!classE,!zeroBegin,!zeroEnd,!hostZero,hadPort';
const FIELD_WIDTH = 300;
const DEFAULT_VALUE = {
    name: '',
    url: '',
    'type':'mongdb',
    dataBaseUserName: '',
    dataBasePassword: '',
    dataBaseName: '',
    statusSuccess:false
};

interface FormData{
    name: string;
    url: string;
    'type': 'mongdb';
    dataBaseUserName: string;
    dataBasePassword: string;
    dataBaseName: string;
    statusSuccess: boolean;
}

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MgdbSource extends Vue {

    submitData = ({ ...DEFAULT_VALUE})
    connectionErrMsg = ''
    oriConnectionParams = ''
    paramsModified = false
    dataType = 'mongdb'


     get fieldWidth () {
        return FIELD_WIDTH;
    }

    getJsonValue () {
        // @ts-ignore
        this.submitData.url = multiTrim(this.submitData.url, /\r?\n/, ',');
        let type = this.dataType === 'mongdb' ? 'mongdb' : 'nebula';
        this.submitData.type = type;
        return this.submitData;
    }

    setJsonValue (data: FormData) {
        Object.assign(this.submitData, DEFAULT_VALUE, data);
    }

    async checkConnection () {
        this.paramsModified = true;
        let type = this.dataType === 'mongdb' ? 'mongdb' : 'nebula';
        this.submitData.type = type;
        let {success, msg} = await this.$ajax.post(TEST_CONNECTIONS_URL, {
            type: this.submitData.type,
            // @ts-ignore
            'url':multiTrim(this.submitData.url, /\r?\n/, ','),
            'dataBasePassword':this.submitData.dataBasePassword,
            'dataBaseUserName':this.submitData.dataBaseUserName,
            dataBaseName:this.submitData.dataBaseName
        });
        if (!success) {
            // @ts-ignore
            this.connectionErrMsg = msg;
            this.submitData.statusSuccess = false;
        } else {
            this.connectionErrMsg = _('连接成功');
            this.submitData.statusSuccess = true;
        }
    }
    _validateIpv4 (value: string) {
        let maxIpLine = this.isKfk ? MUTIL_KFK_IP_MAX_LINE : MUTIL_ES_IP_MAX_LINE;
        // @ts-ignore
        return multiLineIpValidator(value, maxIpLine, MUTIL_IP_NOT_ALLOW);
    }
};
</script>
